<template>
  <div>
    <h1>【aty-affix】 component demo</h1>
    <p>【aty-affix】 本质</p>

    <aty-row class="fd-affix-box">
      <aty-row>
        <aty-title level="4">1.【aty-affix】 基础</aty-title>
        <aty-panel>简单使用，当元素不可见时，直接固定在最顶端。</aty-panel>
        <aty-affix>
          <span class="demo-affix">固定到顶部</span>
        </aty-affix>
      </aty-row>
      <aty-row>
        <aty-title level="4">2.【aty-affix】 滚动到底部规定的位置offset-bottom</aty-title>
        <aty-affix :offset-bottom="300">
          <span class="demo-affix">固定到底部300px</span>
        </aty-affix>
      </aty-row>
      <aty-row>
        <aty-title level="4">3.【aty-affix】 滚动到顶部规定的位置offset-top</aty-title>
        <aty-affix :offset-top="400" @change="change">
          <span class="demo-affix">固定到顶部400px，触发事件</span>
        </aty-affix>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  methods: {
    change (status) {
      Artery.message.info(`Status: ${status}`)
    }
  }
}
</script>
<style  type="text/less"  scoped>
    .fd-affix-box {
        margin: 20px;
    }
    p {
        height: 100px;
    }
   .demo-affix {
        display: inline-block;
        color: #fff;
        padding: 10px 30px;
        text-align: center;
        background: rgba(0,153,229,.9);
    }
</style>
